<template>
  <div>
    <z-table
      :title="tableOptions.title"
      :searchSchemas="searchSchemas"
      :tableProps="tableProps"
      :actionColumn="tableOptions.actionColumn"
      :dataSourceApi="tableOptions.dataSourceApi"
    >
      <template #header>
        <NButton secondary type="primary"> 批量禁用 </NButton>
        <NButton secondary type="primary"> 导出词 </NButton>
        <NButton primary type="primary"> 添加敏感词 </NButton>
      </template>
    </z-table>

    <z-modal-form ref="modalForm" title="编辑敏感词" :schemas="editSchemas">
    </z-modal-form>
  </div>
</template>

<script lang="tsx" setup>
import ZTable from "@components/Table/ZTable.vue";
import { nextTick, reactive, ref } from "vue";
import { getColumns, getSearchSchemas, getEditSchemas } from "./data";
import { getKeywordsList } from "@/api/nopig";
import { genBasicActions } from "@components/Table/helpers/actions";

const searchSchemas = getSearchSchemas();
const editSchemas = getEditSchemas();

const tableProps: any = reactive({
  bordered: true,
  striped: true,
  columns: getColumns(),
  pagination: false,
  scrollX: 1800,
  maxHeight: 500,
});

const modalForm = ref<any>();
const editHandler = ({ rowData }: any) => {
  modalForm.value!.modal.open();
  nextTick(() => {
    modalForm.value!.form.setFields({
      word: rowData["word"],
      is_regex: rowData["is_regex"],
      language: rowData["language"],
      match_type: rowData["match_type"],
      region: rowData["region"],
      exempt_region: rowData["exempt_region"],
      one_way_words: rowData["one_way_words"],
      two_way_words: rowData["two_way_words"],
      expire_time: rowData["expire_time"] * 1000,
    });
  });
};

const tableOptions = reactive({
  title: "词库中心",
  actionColumn: genBasicActions(() => void 0, editHandler, "right"),
  dataSourceApi: getKeywordsList,
});
</script>
